<template>
  <div class="form">
    <div class="inputBox">
      <label for="">背景色</label>
      <input type="color" name="" id="" v-model="bg" />
    </div>
    <div class="inputBox">
      <input
        type="radio"
        name="type"
        v-model="isVertical"
        id="horizontal"
        value="false"
      />
      <label for="horizontal">水平</label>
      <input
        type="radio"
        name="type"
        v-model="isVertical"
        id="vertical"
        value="true"
        checked
      />
      <label for="vertical">垂直</label>
    </div>
    <div class="inputBox">
      <button @click="apply">apply</button>
    </div>
  </div>
</template>
<script>
import { computed, onMounted, reactive, toRaw, toRefs, watch } from "vue";
import { svgDrawUpdate } from "../../util/geoDrawAdd.js";
import * as d3 from "d3";
import { dataSave } from "../../util/data.js";
export default {
  setup() {
    const svg = reactive({
      bg: "#ffffff",
      isVertical: "true",
      size: { w: 595, h: 842 },
    });

    const sizeCom = computed(() => {
      let size = { w: 595, h: 842 };
      if (svg.isVertical === "false") {
        size.w = 842;
        size.h = 595;
      }
      if (svg.isVertical === "true") {
        size.w = 595;
        size.h = 842;
      }
      return size;
    });

    watch(sizeCom, (sizeCom, preSizeCom) => {
      svg.size = sizeCom;
    });

    function apply() {
      const geo = {};
      Object.assign(geo, toRaw(svg));
      svgDrawUpdate(geo);
    }

    return { ...toRefs(reactive(svg)), apply };
  },
};
</script>
